import React from 'react'
import { NativeProps } from '../../utils/native-props'

export type ValueProps<T> = {
  /** 自定义箭头 */
  arrow?: React.ReactNode | ((active: boolean) => React.ReactNode)
  /** 当前展开面板的 key */
  activeKey?: T
  /** 默认展开面板的 key */
  defaultActiveKey?: T
  /** 切换面板时触发 */
  onChange?: (activeKey: T) => void
}

/**
 * 手风琴模式：string | null
 * 非手风琴模式：string[]
 */
export type CollapseProps = (
  | ({
      accordion?: false
    } & ValueProps<string[]>)
  | ({
    accordion: true
  } & ValueProps<string | null>)
) & {
  children?: React.ReactNode
} & NativeProps

export type CollapsePanelProps = {
  /** 自定义箭头 */
  arrow?: React.ReactNode | ((active: boolean) => React.ReactNode)
  /** 是否为禁用状态 */
  disabled?: boolean
  /** 不可见时是否销毁 DOM 结构 */
  destroyOnClose?: boolean
  /** 被隐藏时是否渲染 DOM 结构 */
  forceRender?: boolean
  /** 首次是否执行动画 */
  immediate?: boolean
  /** 唯一标识符 */
  key: string
  /** 标题栏的点击事件 */
  onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void
  /** 标题栏左侧内容 */
  title: React.ReactNode
  /** children */
  children?: React.ReactNode
} & NativeProps

export type CollapsePanelContentProps = {
  /** 是否显示 */
  visible: boolean
  /** 首次是否强制渲染 */
  forceRender: boolean
  /** 关闭是否销毁 */
  destroyOnClose: boolean
  /** 首次是否执行动画 */
  immediate?: boolean
  /** children */
  children?: React.ReactNode
}
